<!--
* @Author: zhangjing
* @Date: 2024-12-24 09:47:27
* @Description: 选择鲜花>
-->
<template>
	<view class="cu-modal bottom-modal" :class="showDetails ? 'show' : ''" @tap="showDetails = false">
		<view class="cu-dialog bg-white" @tap.stop="" style="padding-top: 20px">
			<!-- 关闭 -->
			<view class="action cuIcon-close close" @tap="showDetails = false">
				<u-icon name="close"></u-icon>
			</view>
			<view class="cu-dialog-title">选择鲜花</view>
			<view class="searchbar flex align-center">
				<div class="icon">
					<image src="/static/search.png"></image>
				</div>
				<input class="flex-sub" v-model="keyword" placeholder="搜索鲜花" placeholder-style="color:#B4B4B4" type="text" confirm-type="search" @confirm="confirm($event)" />
			</view>
			<view class="mail" style="height: 70vh; overflow: auto">
				<view class="mail-item flex align-center" @tap="selectProduct(item)" v-for="(item, index) in productList" :key="index">
					<view class="imgbox" >
						<image :src="item.img_url" mode="aspectFit"></image>
					</view>
					<view class="flex-sub">{{ item.name }}</view>
					<mycheckbox :state="item.id == selectId"></mycheckbox>
				</view>
				<mescroll-empty v-if="productList.length == 0"></mescroll-empty>
			</view>
		</view>
	</view>
</template>

<script>
import mycheckbox from '@/components/mycheckbox';
import mescrollEmpty from '@/uni_modules/mescroll-uni/components/mescroll-empty/mescroll-empty';
export default {
	name: 'filterProModal',
	data() {
		return {
			keyword: '',
			showDetails: false,
			productList: [],
			selectId: ''
		};
	},
	components: { mycheckbox, mescrollEmpty },
	methods: {
		show() {
			this.productList = [];
			this.keyword = '';
			this.selectId = '';
			this.showDetails = true;
		},
		confirm() {
			this.getProductList();
		},
		getProductList() {
			this.$postAction(this.$api.getProductTypeList, {
				name: this.keyword
			}).then(da => {
				this.productList = da.data;
			});
		},
		selectProduct(info) {
			this.selectId = info.id;
			this.$emit('selectProduct', info);
			setTimeout(() => {
				this.showDetails = false;
			}, 300);
		}
	}
};
</script>
<style scoped>
@import '../modal.css';
</style>
<style scoped lang="scss">
.cu-modal.bottom-modal .cu-dialog {
	background: #f4f4f4;
	border-radius: 20upx 20upx 0 0;
	font-size: 32upx;
	.action {
		position: absolute;
		right: 20upx;
	}
	.cu-dialog-title {
		font-size: 32upx;
	}
}
.searchbar {
	background: #fff;
	height: 64upx;
	line-height: 64upx;
	font-size: 26upx;
	border-radius: 8upx;
	margin: 20upx;
	text-align: left;
	.icon {
		margin: 0 23upx;
		width: 31upx;
		height: 31upx;
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
}
.mail {
	background: #fff;
	border-radius: 8upx;
	padding: 12upx;
	margin: 20upx;
	text-align: left;
	.mail-item {
		border-bottom: 1px solid #eee;
		padding: 10upx;
		.imgbox {
			width: 100upx;
			height: 100upx;
			border-radius: 8upx;
			display: block;
			margin-right: 10upx;
			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
